<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="../css/MyCss.css" />
  <link type="text/css" rel="stylesheet" href="../css/base.css" />
  <style>
	*{margin: 0; padding: 0; font-size:12px;}
	/* S-left_manage_bar */
	*{margin: 0; padding: 0;}
	.left_manage_bar i{display:block; width:32px; height:32px;}
	.left_manage_bar{width:48px; height:195px; position:fixed; left:60px; top:160px;  border:1px solid #ddd;}

	.left_manage_bar ul li{width:30px; height:30px; background:#f6f4f0; border-bottom:1px solid #ddd; color:#555; padding:9px; position:relative; cursor:pointer;}
	.left_manage_bar ul li:hover{background:#555; color:#fff;}

	.left_manage_bar ul li:last-child{border-bottom:none;}

	.left_manage_bar ul li .store_i{background:url(../image/store.png);}
	.left_manage_bar ul li:hover .store_i {background:url(../image/store_hover.png);}

	.left_manage_bar ul li .back_i{background:url(../image/back.png);}
	.left_manage_bar ul li:hover .back_i {background:url(../image/back_hover.png);}

	.left_manage_bar ul li .price_i{background:url(../image/price.png);}
	.left_manage_bar ul li:hover .price_i {background:url(../image/price_hover.png);}

	.left_manage_bar ul li .add_i{background:url(../image/add_goods.png);}
	.left_manage_bar ul li:hover .add_i {background:url(../image/add_goods_hover.png);}

	.store_box,.back_box,.manage_price_box,.add_goods_box{ position:absolute; width:0px; height:32px; border:1px solid #e6e6e6; top: 8px; left:48px; background:#fff; transition:all 0.2s ease-out; overflow:hidden;}
	.left_manage_bar ul li:hover div {width:120px;}

	.label_close{float:right; width:16px; height:16px;}
	.label_close i{background:url(../image/leftX.png);}
	.label_close i:hover{background:url(../image/leftX_hover.png);}
	/*功能完善中*/
	.store_box{}
	.store_box label, .back_box label ,.manage_price_box label, .add_goods_box label  {display:block; text-align:center; color:#888; line-height:32px;}

	.back_box{} 

	.manage_price_box{}

	.add_goods_box{}
	/* E-left_manage_bar */

	.infor-nav-con,.goods-nav-con,.flip-advert-con,.part1-con,.part2-con, .body-con {width:1100px; margin:auto;}
	.goods-area-part1, .goods-area-part2, .part2-con, .goods-nav-con, .goods-body {overflow:hidden;}
	ul {list-style-type:none;}
	/* S - infor-nav */
	.infor-nav {width:100%; position:relative; background:#555;}
	.infor-nav .infor-nav-con {height:40px;}
	.infor-nav .infor-nav-con ul {}
	.infor-nav .infor-nav-con ul li {float:left; color:#fff; width:200px; margin:12px 0px;}
	.infor-nav .infor-nav-con ul li:nth-child(3) {width:300px;}  
	.infor-nav .infor-nav-con ul li .my-cart-i{background:url(../image/my-cart.png); }
	.infor-nav .infor-nav-con ul li:last-child {float:right;}
	.infor-nav .infor-nav-con label{cursor:pointer;}
	.infor-nav .infor-nav-con label:hover{color:#f6f4f0;}
	/* E - infor-nav */

	/* S - follow-box */
	.follow-box{width:100%; top:0; height:50px; background:#555; display:none; position:fixed;}
	/* E - follow-box */

	/* S - goods-nav */
	.shop-nav,.shop-icon {float:left;}
	.goods-nav{width:100%; border-bottom:1px solid rgba(204, 207, 208, 0.26)}
	.goods-nav .goods-nav-con { height:20px; padding:30px 2px;}
	.goods-nav .goods-nav-con .shop-icon {}
	.goods-nav .goods-nav-con .shop-icon a{background:url(../image/store_ico.png);width: 48px;height: 48px;display: block;cursor:pointer; margin:-14px 10px;}
	.goods-nav .goods-nav-con .shop-nav {margin-left:80px;}
	.goods-nav .goods-nav-con .shop-nav ul li {float:left; width:60px; height:25px; text-align:center; line-height:25px; cursor:pointer;}
	.goods-nav .goods-nav-con .shop-nav ul li:hover{background:#555; color:#f6f4f0;}
	.goods-nav .goods-nav-con .shop-nav ul li:nth-child(1) {background:#555; color:#f6f4f0;}
	.goods-nav .goods-nav-con .shop-search {float:right;}
	.goods-nav .goods-nav-con .shop-search input {padding-left:30px;}
	.goods-nav .goods-nav-con .shop-search .shop-search-i {background:url(../image/shop_search.png); opacity:0.5; position:absolute; cursor:pointer;}
	.goods-nav .goods-nav-con .shop-search .shop-search-i:hover{opacity:1;}

	.storp_ico i{background:url("../image/merchant/shop_title.jpg"); width: 260px;height: 91px;display:block;position:inherit;margin:auto;}
	/* E - goods-nav */

	/* S - goods-body */
	.goods-body {}
	.goods-body .body-con {border:1px solid rgba(204, 207, 208, 0.26); margin-top:30px; min-height:628px; overflow: hidden;}
	.body-con ul li {width:; height:; border:1px solid rgba(204, 207, 208, 0.26);}

	#con_body_ul{padding:10px;}
	#con_body_ul li{width:211px; height:270px; border: 1px solid rgba(204, 207, 208, 0.26); list-style-type:none; float:left; overflow:hidden; padding:4px; margin-left:38px; margin-top:20px; color: #555;}
	#con_body_ul li:hover{box-shadow: 0px 0px 10px -1px #adaba6; cursor:pointer;}
		
	#con_body_ul li div:nth-child(1){height:230px;}
	#con_body_ul li div:nth-child(2){text-align:center; height:23px; margin-top: 2px;}
	#con_body_ul li div:nth-child(2) span{font-size: 14px; font-family: sans-serif; margin-left: 2px;}

	#con_body_ul li div:nth-child(3){text-align:center; height:25px;}
	#con_body_ul li div:nth-child(3) span{font-size: 14px; line-height:16px; }

	#con_body_ul li div:nth-child(4) a{width:211px;height:30px;display:block; color: #fff; background:#f90;text-align:center; line-height:30px;cursor:pointer;border-radius:5px;}
	#con_body_ul li div:nth-child(4) a:hover{background:#ec8d00;}
	/* E - goods-body */

	/* S - foot */
	.foot{min-height:50px;}
	.bom_container{height:40px; width:900px; border-bottom:1px solid #ccc; margin:auto;}
	/* E - foot */
  </style>
 </head>
 <body>
	<!-- S-left_manage_bar -->
	<div class="left_manage_bar">
		<ul class="nolist">
			<li class="store_infor" title="店铺信息">
				<i class="store_i"></i>
				<div class="store_box">
					<label>功能正在完善</label>
				</div>
			</li>
			<li class="store_back" title="设置店铺背景及颜色">
				<i class="back_i"></i>
				<div class="back_box">
					<label>功能正在完善</label>
				</div>
			</li>
			<li class="store_manage_price" title="管理店铺中的商品价格">
				<i class="price_i"></i>
				<div class="manage_price_box">
					<label>功能正在完善</label>
				</div>
			</li>
			<li class="store_add_goods" title="增加商品">
				<i class="add_i"></i>
				<div class="add_goods_box">
					<label>功能正在完善</label>
				</div>
			</li>
		</ul>
	</div>
	<!-- E-left_manage_bar -->

	<!--S - infor-nav-->
	<div class="infor-nav">
		<div class="infor-nav-con">
			<!--登录 注册 我的订单 我的个人信息 购物车 -->
			<ul>
				<li>
					<label class="dear_boss" onclick="merchant.linkTo('info')">老板您好</label>&nbsp;&nbsp;&nbsp;&nbsp;
					<label onclick="merchant.linkTo('register')">注册</label>
				</li>
				<li></li>
				<li></li>
				<li>
					<label onclick="merchant.linkTo('manage')" class="my-infor">管理店铺</label>&nbsp;&nbsp;
					<label onclick="merchant.linkTo('order')" class="my-order">查看订单</label>&nbsp;&nbsp;
					<label onclick="merchant.linkTo('sales')" class="my-cart">销售</label>
				</li>
			</ul>
		</div>
	</div>
	<!--E - infor-nav-->

	<!--S - follow-box-->
	<div class="follow-box"></div>
	<!--E - follow-box-->

	<!--S - goods-nav-->
	<div class="goods-nav">
		<div class="goods-nav-con">
			<div class="shop-icon">
				<a></a>
			</div>
			<div class="shop-nav">
			</div>
			<!--查找-->
			<div class="search" id="search">
				<input type="text" placeholder="请输入商品关键字" id="search_text">
				<input type="button" value="搜索本店" id="search_button">
				<!--搜索结果显示区-->
				<div class="search_show" id="search_show"></div>
			</div>
		</div>
		<div class="storp_ico">
			<i></i>
			<div style="clear:both;"></div>
		</div>
	</div>
	<!--E - goods-nav-->

	<!--S - goods-body-->
	<div class="goods-body">
		<div class="body-con">
			<ul id="con_body_ul" class="nolist">
			</ul>
		</div>
	</div>
	<!--E - goods-body-->

	<!--S -  foot-->
	<div class="foot">
		<div class="bom_container">
			<li style="color:#586069;list-style:none;padding:10px 245px;">Copyright ©2017 <span  style="color:#a71d5d;cursor:pointer;" title="作者介绍">chen</span> Powered By <span  style="color:#a71d5d;cursor:pointer;" title="程序目录">shop_net</span> Version 1.0.0</li>
		</div>
	</div>
	<!--E - foot-->


	<script src="../js/MyjsV0-8.js"></script>
	<script src="../js/merchant_base1.js"></script>
	<script>
	//跳转至merchant页面
	function toPage(type){
		ajax({
			type:"post",
			url:"merchant_linkTo",
			data:{data:type},
			success:function(msg){
				if(msg == "true") linkTo.open("merchant.html") ;
			},error:function(msg){
				console.log(msg) ;
			}
		}) ;
	}
	
	/* S-goods-body */
	var goods = new goodsMudle() ; //商品模板
	//初始化页面
	ajax({
		type:"post",
		url:"merchantIndexAction",
		success:function(msg){
			if($$.util.isJSON(msg)){
				var object = Tokener.parseObject(msg) ;
				$(".dear_boss")[0].text("亲爱的"+object.get("dearBoss")+",晚上好！") ;
				var goodss = object.get("goodsList") ;
				var it = goodss.itarator() ;
				while(it.hasNext()){
					var object = it.next() ;
					$("#con_body_ul").insert(goods.makeHTML(object.get("id"), "../"+object.get("imgPath"), object.get("price"), object.get("name"))) ;
				}
			}else alert("初始化数据异常") ;
		},
		error:function(msg){
			alert("初始化异常") ;
		}
	}) ;
	
	//商品模板
	function goodsMudle(){
		//html累加
		this.makeHTML = function (id,p_url,price,goodN,alt){
			return "<li data-id='"+id+"'>" +
							"<div>" +
								"<img src="+p_url+" alt='"+alt+"' width='211px' height='230px'/>" +
							"</div>" +
							"<div>" +
								"<span>￥"+price+"</span>" +
							"</div>" +
							"<div>" +
								"<span>"+goodN+"</span>" +
							"</div>" +
						"</li>" ;
		}
	}

	/* E-goods-body */

	/* S-left_manage_bar */
	//找到左栏的合适位置
	window.onresize = function(){
		$(".left_manage_bar")[0].css("left:" + ((innerWidth - 1100)/2 - 58) + "px; top:" + (innerHeight - 197)/2 + "px;", false) ;
	}
	$(".left_manage_bar")[0].css("left:" + ((innerWidth - 1100)/2 - 58) + "px; top:" + (innerHeight - 197)/2 + "px;", false) ;
	//展开set
	
	//展开
	/*
	var ani_set = new AnimateRoutine({
		aniEle:$(".left_manage_bar")[0],	//动画元素
		aniMin:48,
		aniMax:243,		//可以代表元素高的最大值或者元素宽的最小值
		type:"bottom",	//[right、top、bottom]
		closeAll:false,
		aniTime:4,
	}) ;
	var bool = true ;
	var setElement = $(".store_set_name")[0] ;
	setElement.onclick = function (){
		if(bool){
			bool = false ;
			ani_set.run() ;
			setElement.css("background:#555;", false) ;
			setElement.$("i")[0].css("background:url(../image/store_set_hover.png);", false) ;
		}else{
			bool = true ;
			ani_set.next() ;
			setElement.css("background:#f6f4f0;", false) ;
			setElement.$("i")[0].css("", false) ;
		}
	}
	var ani1 = new AnimateBevelAngle({
		aniEle:$(".store_box")[0],	//动画元素
		aniMax:300,		//可以代表元素高的最大值或者元素宽的最小值
		type:"R_B",	//[right、top、bottom]
		widthVal:280,
		initTop:209,
		initLeft:109,
		aniTime:4,
	}) ;
	var ani2 = new AnimateBevelAngle({
		aniEle:$(".back_box")[0],	//动画元素
		aniMax:300,		//可以代表元素高的最大值或者元素宽的最小值
		type:"R_B",	//[right、top、bottom]
		widthVal:280,
		initTop:257,
		initLeft:109,
		aniTime:4,
	}) ;
	var ani3 = new AnimateBevelAngle({
		aniEle:$(".manage_price_box")[0],	//动画元素
		aniMax:300,		//可以代表元素高的最大值或者元素宽的最小值
		type:"R_B",	//[right、top、bottom]
		widthVal:280,
		initTop:306,
		initLeft:109,
		aniTime:4,
	}) ;
	var ani4 = new AnimateBevelAngle({
		aniEle:$(".add_goods_box")[0],	//动画元素
		aniMax:300,		//可以代表元素高的最大值或者元素宽的最小值
		type:"R_B",	//[right、top、bottom]
		widthVal:280,
		initTop:355,
		initLeft:109,
		aniTime:4,
	}) ;
	*/

	//滑过事件
	/*
	manageLiHover(["store","back","price","add_goods"], [ani1, ani2, ani3, ani4], [$(".store_box")[0], $(".back_box")[0], $(".manage_price_box")[0], $(".add_goods_box")[0]], $(".left_manage_bar")[0].$("li")) ;
	*/
	//根据滑入打开自己同时关掉前者
	/**
	必须是li和相应的动画，根据动画判断动作
	*/
	function manageLiHover(arr, aniArr, divElements, liElements){
		var preAni ;			//上一个动画
		var preElement ;		//上一个li元素
		var preIElement ;		//上一个i元素
		var prePath ;			//上一个path
		for(var i = 1; i < 5; i ++){
			(function(i){
				var element = liElements[i] ;	//li元素
				var iElement = element.$("i")[0] ;					//i元素
				element.onmouseover = function(e){
					setHover(iElement, element, arr[i-1]) ;
					//这里必须要用aniArr来做判断 preElement却不能，因为其中有其他元素会影响事件
					if(aniArr[i-1] != preAni && preAni != undefined){
						preAni.next() ;
						setRedu(preIElement, preElement, prePath) ;
						setPreVal(element, iElement, arr[i-1], aniArr[i-1]) ;
						aniArr[i-1].run() ;
					}
					if(preAni == undefined){
						aniArr[i-1].run() ;
						setPreVal(element, iElement, arr[i-1], aniArr[i-1]) ;
					}
					/*}*/
				}
				divElements[i-1].$("label")[0].onclick = function (){
					aniArr[i-1].next() ;
					setRedu(iElement, element, arr[i-1]) ;
				}
			})(i) ;
		}
		//设置上一个参数 【上一个动画，上一个li元素，上一个i元素，上一个path】
		function setPreVal(element, iElement, path, ani){
			preAni = ani ;
			preElement = element ;
			preIElement = iElement ;
			prePath = path ;
		}
		//还原		设置样式【li元素，i元素】
		function setRedu(iElement, element, path){
			iElement.css("background:url(../image/"+path+".png);", false) ;
			element.css("background:#f6f4f0;", false) ;
		}
		//鼠标滑过  设置样式【li元素，i元素】
		function setHover(iElement, element, path){
			iElement.css("background:url(../image/"+path+"_hover.png);", false) ;
			element.css("background:#555;", false) ;
		}
	}
	/* E-left_manage_bar */


	</script>
 </body>
</html>